import defaultHeadPng from '@/assets/imgs/default_head.png';
import { Button, Space } from 'antd';
import { useRef, useState } from 'react';
import type { YmDrawerProps } from 'ym-design';
import { YmDrawer } from 'ym-design';
import './demo.less';

function YmDrawerPage() {
  const [open1, setOpen1] = useState(false);
  const drawerContainer1 = useRef<HTMLDivElement>(null);
  const drawerContainer2 = useRef<HTMLDivElement>(null);
  const drawerContainer3 = useRef<HTMLDivElement>(null);

  const handleDrawerClose = () => {
    setOpen1(false);
  };

  const YmDrawerProps: Partial<YmDrawerProps> = {
    open: open1,
    onClose: handleDrawerClose,
    destroyOnClose: true,
    children: <div>drawer内容</div>,
    extra: (
      <Space size="small">
        <Button type="text" size="small">
          新增
        </Button>
        <Button type="text" size="small">
          删除
        </Button>
        <Button type="text" size="small">
          详情
        </Button>
      </Space>
    ),
  };

  const title2Dom = (
    <div
      style={{
        display: 'flex',
        flexFlow: 'row nowarp',
        alignItems: 'center',
        columnGap: '8px',
      }}
    >
      <img
        src={defaultHeadPng}
        alt=""
        style={{
          flex: '0 0 32px',
          height: '32px',
          overflow: 'hidden',
          borderRadius: '50%',
          outline: 'none',
        }}
      />
      <p
        style={{
          fontSize: '16px',
          lineHeight: '22px',
          color: '#333',
          fontWeight: 500,
        }}
      >
        标题2
      </p>
    </div>
  );

  const title3Dom = (
    <div className="header_title_container">
      <img className="container_img" src={defaultHeadPng} alt="" />
      <div className="container_summary">
        <p className="summary_title">标题3</p>
        <p className="summary_desc">描述3</p>
      </div>
    </div>
  );

  return (
    <div>
      <Button
        onClick={() => {
          setOpen1(true);
        }}
      >
        打开drawer
      </Button>
      <div
        ref={drawerContainer1}
        style={{ position: 'relative', height: '150px' }}
      >
        {drawerContainer1.current && (
          <YmDrawer
            {...YmDrawerProps}
            title="标题1"
            getContainer={drawerContainer1.current}
          />
        )}
      </div>
      <div
        ref={drawerContainer2}
        style={{ position: 'relative', height: '150px' }}
      >
        {drawerContainer2.current && (
          <YmDrawer
            {...YmDrawerProps}
            title={title2Dom}
            getContainer={drawerContainer2.current}
          />
        )}
      </div>
      <div
        ref={drawerContainer3}
        style={{ position: 'relative', height: '150px' }}
      >
        {drawerContainer3.current && (
          <YmDrawer
            {...YmDrawerProps}
            title={title3Dom}
            getContainer={drawerContainer3.current}
          />
        )}
      </div>
    </div>
  );
}

export default YmDrawerPage;
